<template>
	<view class="detail-container">
		<sunMenu></sunMenu>
		<view class="detail-card">
			<view class="card-title">
				<text>訂單詳情</text>
				<text
					:class="['status-tag', getStatusClass(orderDetail.status)]">{{getStatusText(orderDetail.status)}}</text>
			</view>
			<!-- 基本信息 -->
			<view class="section">
				<view class="section-title">基本信息</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">團隊訂單：</text>
						<text class="value">{{orderDetail.teamName}}</text>
						<text style="color: red;" class="value">{{orderDetail.isLead==1?'團長':''}}</text>
					</view>
					<view class="info-item">
						<text class="label">訂單編號：</text>
						<text class="value">{{orderDetail.orderNumber}}</text>
					</view>
					<view class="info-item">
						<text class="label">報名項目：</text>
						<text class="value">{{orderDetail.raceCategoriesName}}</text>
					</view>
					<view class="info-item">
						<text class="label">參賽者：</text>
						<text class="value">{{orderDetail.nickName}}</text>
					</view>
					<view class="info-item">
						<text class="label">性別：</text>
						<text class="value">{{orderDetail.sex === '0' ? '男' : '女'}}</text>
					</view>
					<view class="info-item">
						<text class="label">出生日期：</text>
						<text class="value">{{formatDate(orderDetail.birthday)}}</text>
					</view>
					<view class="info-item">
						<text class="label">身份證號：</text>
						<text class="value">{{orderDetail.idNumber}}</text>
					</view>
				</view>
			</view>

			<!-- 費用信息 -->
			<view class="section">
				<view class="section-title">費用信息</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">報名費：</text>
						<text class="value">NT$ {{orderDetail.racePrice}}</text>
					</view>
					<view class="info-item">
						<text class="label">加價購：</text>
						<text class="value">NT$ {{orderDetail.addMoney}}</text>
					</view>
					<view class="info-item">
						<text class="label">郵資：</text>
						<text class="value">NT$ {{orderDetail.sendMoney}}</text>
					</view>
					<view class="info-item">
						<text class="label">折扣金額：</text>
						<text class="value">NT$ {{orderDetail.discount}}</text>
					</view>
					<view class="info-item">
						<text class="label">支付方式：</text>
						<text class="value">{{getPayTypeText(orderDetail.payType)}}</text>
					</view>
					<view class="info-item">
						<text class="label">實付金額：</text>
						<text class="value highlight">NT$ {{orderDetail.payMoney}}</text>
					</view>
				</view>
			</view>

			<!-- 聯絡信息 -->
			<view class="section">
				<view class="section-title">聯絡信息</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">手機號碼：</text>
						<text class="value">{{orderDetail.phonenumber}}</text>
					</view>
					<view class="info-item">
						<text class="label">市話：</text>
						<text class="value">{{orderDetail.tel || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">電子信箱：</text>
						<text class="value">{{orderDetail.email}}</text>
					</view>
					<view class="info-item full-width">
						<text class="label">地址：</text>
						<text
							class="value">{{orderDetail.cityLabel}}{{orderDetail.areaLabel}}{{orderDetail.roadLabel}}{{orderDetail.address}}</text>
					</view>
				</view>
			</view>

			<!-- 緊急聯絡人 -->
			<view class="section">
				<view class="section-title">緊急聯絡人</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">姓名：</text>
						<text class="value">{{orderDetail.emergencyContact || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">電話：</text>
						<text class="value">{{orderDetail.emergencyPhone || '-'}}</text>
					</view>
				</view>
			</view>

			<!-- 家長/監護人信息 -->
			<view class="section">
				<view class="section-title">家長/監護人信息</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">姓名：</text>
						<text class="value">{{orderDetail.guardian_name || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">身份證字號：</text>
						<text class="value">{{orderDetail.guardian_id || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">行動電話：</text>
						<text class="value">{{orderDetail.guardian_mobile || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">市內電話：</text>
						<text class="value">{{orderDetail.guardian_phone || '-'}}</text>
					</view>
				</view>
			</view>

			<!-- 訂單時間 -->
			<view class="section">
				<view class="section-title">訂單時間</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">創建時間：</text>
						<text class="value">{{formatDateTime(orderDetail.createTime)}}</text>
					</view>
					<view class="info-item">
						<text class="label">支付時間：</text>
						<text class="value">{{formatDateTime(orderDetail.payTime) || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="label">退款時間：</text>
						<text class="value">{{formatDateTime(orderDetail.refundTime) || '-'}}</text>
					</view>
				</view>
			</view>

			<!-- 匯款信息 -->
			<view class="section" v-if="orderDetail.zzTime || orderDetail.zzAcount || orderDetail.zzImg">
				<view class="section-title">匯款信息</view>
				<view class="info-grid">
					<view class="info-item" v-if="orderDetail.zzTime">
						<text class="label">匯款時間：</text>
						<text class="value">{{formatDateTime(orderDetail.zzTime)}}</text>
					</view>
					<view class="info-item" v-if="orderDetail.zzAcount">
						<text class="label">帳號末五碼：</text>
						<text class="value">{{orderDetail.zzAcount}}</text>
					</view>
					<view class="info-item full-width" v-if="orderDetail.zzImg">
						<text class="label">轉帳截圖：</text>
						<view class="transfer-img">
							<image :src="orderDetail.zzImg" mode="aspectFit" @click="previewImage"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<!-- 底部固定按钮栏 -->
		<view class="fixed-bottom-bar" v-if="orderDetail.payType == 'transferAccounts'">
			<button class="bottom-btn" @click="onFillRemitDate">填寫匯款日期</button>
			<button class="bottom-btn" @click="onFillAccountLast5">帳號末五碼</button>
			<button class="bottom-btn" @click="onUploadTransferImg">上傳轉帳截圖</button>
		</view>
		<u-datetime-picker @confirm="datetimeConfirm" @cancel="showZzTime=false" :show="showZzTime" v-model="value1"
			mode="datetime"></u-datetime-picker>

		<!-- 账号末五码输入框 -->
		<u-popup :show="showAccountInput" mode="center" @close="showAccountInput = false">
			<view class="account-input-popup">
				<view class="popup-title">請輸入帳號末五碼</view>
				<view class="input-box">
					<u-input v-model="orderDetail.zzAcount" type="number" maxlength="5" placeholder="請輸入5位數字"
						border="true"></u-input>
				</view>
				<view class="popup-btns">
					<button class="cancel-btn" @click="showAccountInput = false">取消</button>
					<button class="confirm-btn" @click="confirmAccountInput">確認</button>
				</view>
			</view>
		</u-popup>

		<!-- 转账截图预览 -->
		<u-popup :show="showImgPreview" mode="center" @close="showImgPreview = false">
			<view class="img-preview-popup">
				<view class="popup-title">轉帳截圖預覽</view>
				<view class="preview-content">
					<image :src="orderDetail.zzImg" mode="aspectFit" @click="previewImage"></image>
				</view>
				<view class="popup-btns">
					<button class="cancel-btn" @click="cancelImgUpload">取消</button>
					<button class="confirm-btn" @click="subForm">確認</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import sunMenu from '../components/sun-menu/sun-menu.vue'
	import {
		getOrderDetail,
		updateOrderDetail
	} from '@/api/api.js'
	import {
		uploadImg
	} from '@/api/system/user.js'
	export default {
		components: {
			sunMenu
		},
		data() {
			return {
				orderDetail: {
					zzTime: Number(new Date()),
					zzAcount: '',
					zzImg: ''
				},
				showZzTime: false,
				showAccountInput: false,
				showImgPreview: false,
				value1: Number(new Date()),
			}
		},
		onLoad(option) {
			if (option.id) {
				this.orderDetail.id = option.id;
				this.getOrderDetail(option.id);
			}
		},
		methods: {
			// 获取订单详情
			getOrderDetail(id) {
				uni.showLoading({
					title: '加載中...'
				});
				getOrderDetail(id).then(res => {
					this.orderDetail = res.data;
					uni.hideLoading();
				}).catch(error => {
					console.error('获取订单详情失败：', error);
					uni.hideLoading();
					uni.showToast({
						title: '加載失敗',
						icon: 'none'
					});
				});
			},
			getStatusText(status) {
				const statusMap = {
					'0': '待付款',
					'1': '已付款',
					'2': '已退款',
					'3': '已取消'
				};
				return statusMap[status] || '未知狀態';
			},
			getStatusClass(status) {
				const classMap = {
					'0': 'status-pending',
					'1': 'status-paid',
					'2': 'status-refunded',
					'3': 'status-cancelled'
				};
				return classMap[status] || 'status-unknown';
			},
			getPayTypeText(payType) {
				const payTypeMap = {
					'credit': '信用卡',
					'transfer': '銀行轉帳',
					'transferAccounts': '銀行匯款'
				};
				return payTypeMap[payType] || payType;
			},
			formatDate(dateString) {
				if (!dateString) return '-';
				const date = new Date(dateString);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			formatDateTime(dateString) {
				if (!dateString) return '-';
				const date = new Date(dateString);
				return `${this.formatDate(dateString)} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
			},
			// 新增按钮事件方法
			onFillRemitDate() {
				this.showZzTime = true
			},
			onFillAccountLast5() {
				this.showAccountInput = true;
			},
			onUploadTransferImg() {
				// 选择图片
				uni.chooseImage({
					count: 1, // 只选择一张图片
					sizeType: ['compressed'], // 压缩图片
					sourceType: ['album', 'camera'], // 从相册选择或使用相机
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 上传图片
						this.uploadImage(tempFilePath);
					}
				});
			},
			datetimeConfirm(e){ 
				this.orderDetail.zzTime =e.value;
				this.subForm();
			},
			subForm() {
				let that = this
				this.showZzTime = false;
				this.showImgPreview = false;
				this.showAccountInput = false;
				uni.showLoading({
					title: '更新中...'
				});
				updateOrderDetail(this.orderDetail).then(res => {
					uni.showToast({
						title: '更新成功',
						icon: 'success'
					});
					that.getOrderDetail(that.orderDetail.id);
				})
			},
			uploadImage(filePath) {
				uni.showLoading({
					title: '上傳中...'
				});
				uploadImg(filePath).then(res => {
					uni.hideLoading()
					this.orderDetail.zzImg = res.data;
					this.showImgPreview = true;
					uni.showToast({
						title: '上傳成功',
						icon: 'success'
					});
				})
			},
			// 预览图片
			previewImage() {
				if (this.orderDetail.zzImg) {
					uni.previewImage({
						urls: [this.orderDetail.zzImg],
						current: this.orderDetail.zzImg
					});
				}
			},
			confirmAccountInput() {
				if (!this.orderDetail.zzAcount) {
					uni.showToast({
						title: '請輸入帳號末五碼',
						icon: 'none'
					});
					return;
				}
				if (this.orderDetail.zzAcount.length !== 5) {
					uni.showToast({
						title: '請輸入5位數字',
						icon: 'none'
					});
					return;
				}
				this.subForm()
			},
			cancelImgUpload() {
				this.showImgPreview = false;
			}
		}
	}
</script>

<style>
	.detail-container {
		background: #f5f5f5;
		min-height: 100vh;
	}

	.detail-card {
		background: #ffffff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 1px solid #eee;
		margin-bottom: 20px;
		font-size: 18px;
		font-weight: bold;
	}

	.section {
		margin-bottom: 30px;
	}

	.section:last-child {
		margin-bottom: 0;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
		position: relative;
		padding-left: 12px;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 16px;
		background: #81D8D0;
		border-radius: 2px;
	}

	.info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.info-item {
		display: flex;
		align-items: baseline;
	}

	.info-item.full-width {
		grid-column: 1 / -1;
	}

	.label {
		color: #666;
		font-size: 14px;
		margin-right: 8px;
		flex-shrink: 0;
	}

	.value {
		color: #333;
		font-size: 14px;
		flex: 1;
		word-break: break-all;
	}

	.value.highlight {
		color: #f44336;
		font-weight: bold;
		font-size: 16px;
	}

	.status-tag {
		padding: 4px 12px;
		border-radius: 4px;
		font-size: 14px;
		font-weight: normal;
	}

	.status-pending {
		background: #fff3e0;
		color: #ff9800;
	}

	.status-paid {
		background: #e8f5e9;
		color: #4caf50;
	}

	.status-refunded {
		background: #ede7f6;
		color: #673ab7;
	}

	.status-cancelled {
		background: #fbe9e7;
		color: #f44336;
	}

	@media screen and (max-width: 768px) {
		.detail-container {
			padding: 88rpx 15px 15px;
		}

		.detail-card {
			padding: 15px;
		}

		.info-grid {
			grid-template-columns: 1fr;
			gap: 10px;
		}

		.card-title {
			font-size: 16px;
			padding-bottom: 15px;
			margin-bottom: 15px;
		}

		.section {
			margin-bottom: 20px;
		}

		.section-title {
			font-size: 15px;
			margin-bottom: 12px;
		}

		.label,
		.value {
			font-size: 13px;
		}

		.value.highlight {
			font-size: 15px;
		}
	}

	.fixed-bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 10px 0 20px 0;
		z-index: 100;
	}

	.bottom-btn {
		flex: 1;
		margin: 0 8px;
		background: #81D8D0;
		color: #fff; 
		border-radius: 6px;
		font-size: 15px;
		padding: 12px 0;
		font-weight: bold;
	}

	.account-input-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.input-box {
		margin-bottom: 30rpx;
	}

	.popup-btns {
		display: flex;
		justify-content: space-between;
	}

	.cancel-btn,
	.confirm-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
	}

	.confirm-btn {
		background: #81D8D0;
		color: #fff;
	}

	.img-preview-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.preview-content {
		width: 100%;
		height: 400rpx;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.preview-content image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.transfer-img {
		margin-top: 10rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		overflow: hidden;
		background: #f5f5f5;
	}

	.transfer-img image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
</style>